웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS의 입력폼엔 사용되는 v-model에는 modifier(수식어)가 사용될 수 있습니다. 사용 가능한 수식어는 아래와 같습니다.
v-model.lazy
v-model.number
v-model.trim
위 수식어를 v-model 프로퍼티와 함께 사용하면 좀 더 편리한 기능을 간단하게 제공합니다. 그럼 위 수식어 들을 하나씩 알아봅니다.
! v-model.lazy
입력된 값이 바로 data에 반영되지 않고 엔터를 누르거나 포커스가 벗어나는 등의 이벤트가 발생할 경우에만 값이 반영되어 나타납니다. lazy는 debounce와는 다르니 참고하세요.! v-model.number 알아보기
input 폼을 사용하여 입력값을 받는 경우 숫자 또는 문자 무엇을 입력해도 타입이 문자로 나타나게됩니다. 이 경우 타입을 number 즉, 숫자로 자동으로 바꾸어주는 방법으로 v-model.number를 사용할 수 있습니다.<input v-model.number="test" type="text" />
{{ typeof test }}
{{ typeof test }}
위 예제는 test의 값의 타입을 표현식으로 출력해주는 예제입니다. 만약 몇 가지 값들을 입력하고 출력 결과를 확인하면 아래와 같습니다.
abc // 'String'
ab123 // 'String'
123 // 'Number'
123abc // 'Number' 단 뒤의 문자는 무시됨
ab123 // 'String'
123 // 'Number'
123abc // 'Number' 단 뒤의 문자는 무시됨
보시는 것처럼 문자로 입력하면 당연히 문자로 결과를 반환합니다. 다만 숫자인 경우 숫자 타입이 반환되는 것을 알 수 있죠.
! v-model.trim 알아보기
trim 함수와 동일하게 입력값의 앞과 두의 공백을 제거해줍니다.<input v-model.trim="test" />
{{ '1' + trim + '2' }}
{{ '1' + trim + '2' }}
위와 같은 예제가 있는 경우 앞 뒤 공백을 제거하여 줍니다. 즉 만약 입력한 값이 다음과 같다면
'123 '
' 123'
' 123 '
'123' // test의 값은 모두 동일하게 123
' 123'
' 123 '
'123' // test의 값은 모두 동일하게 123
이처럼 손쉽게 공백을 제거할 수 있습니다.
아래의 글도 찾고 계시지 않나요?
